"use client"
import { UploadOutlined } from '@ant-design/icons';
import { Button, message,Card,Image,Upload  } from 'antd';
import { error, log } from 'console';
import { useEffect, useState,useRef } from "react";
// import Upload from '@/components/base/tool/Upload';
import { UploadRef } from '@/components/base/tool/Upload/type';
import { Mime,UploadProps } from '@/components/base/tool/Upload/type';
import { generateImage } from './api';
import { showTip } from '@/lib/util';
import ReactCompareImage from 'react-compare-image';
import { getBase64 } from '@/lib/util';
import { uploadFile } from './api';
export interface FunctionExpInfo{
    /**每个技术页的主题 */
    theme:string,
    /**功能体验模块生成图片的示例 放在第一张 */
    examImg:string,
    /**功能体验模块的参考图 */
    images:string[],
}

export default function FunctionExperience ({data,isAIGC,isCompare,kit}:{data:FunctionExpInfo,isAIGC:boolean,isCompare:boolean,kit:string}) {
    const [activeIndex, setActiveIndex] = useState(0);
    const [preImg, setPreImg] = useState<string>(); //要生成的图片
    const [afterImg, setAfterImg] = useState<string>(); //生成后的图片
    /**每次切换主题时重置参考图片 */
    useEffect(()=>{
        setAfterImg("")
        if(isCompare){
            setAfterImg(data?.examImg)
            setPreImg(data?.images[0])
        }else setPreImg(data?.examImg?data?.examImg: data?.images[0])
    },[data?.theme])
    /**选择参考图片 */
    const choosImg=async(url:string,index:number)=>{
        setActiveIndex(index)
        setPreImg(url)
        setAfterImg("")
        if(!kit){
            showTip("功能待实现",'warning')
            return
        }
        const res=await generateImage(kit,'https://ai.yy.com'+url!) //加上https://ai.yy.com部署后才是有效路径
        if(res)isCompare?setAfterImg(res.img_url):setPreImg(res.img_url)
    }
    return (
        <div id="part-2" className="w-full flex flex-col justify-center items-center py-[100px] bg-[#f9fafa]">
            <p className="text-[25px]">功能体验</p>
            <div className="w-[1100px] flex justify-around flex-wrap mt-10">
                <Card style={{ width: isAIGC?600:750}}>
                    <div className='overflow-hidden bg-[#DCDCDC] flex items-center justify-center' style={{width:isAIGC?"550px":"700px",height:isAIGC?"530px":"450px"}}>
                        {preImg&&!afterImg&&<Image preview={false} src={preImg} alt="示例图" style={{width:isAIGC?"550px":"700px",height:isAIGC?"530px":"450px",backgroundColor:"#DCDCDC", objectFit:"contain" }}/>}
                    {isCompare&&afterImg&&
                            <ReactCompareImage leftImage={preImg?preImg:data?.images[0]} leftImageCss={{height:"450px",position:"absolute",objectFit:"contain"}} rightImage={afterImg} rightImageCss={{height:"450px",position:"absolute",objectFit:"contain"}}/>
                        }
                        </div>
                    <div className='flex items-center gap-5 my-5'>
                        <Upload
                            showUploadList={false}
                            beforeUpload={async (file:File) => {
                                if(!kit){
                                    showTip("功能待实现",'warning')
                                    return
                                }
                                const isJpgOrPng = file.type === 'image/jpeg' ||'image/png'||'image/JPG'||'image/BMP';
                                if (!isJpgOrPng) {
                                    message.error('不支持上传该格式的图片!');
                                }
                                const isLt6M = file.size / 1024 / 1024 < 6;
                                if (!isLt6M) {
                                    message.error('图片大小不能超过6MB!');
                                }
                                if(isJpgOrPng && isLt6M){
                                    const base64 = await getBase64(file)
                                    const name=file.name.split(".")[0]
                                    const type=file.type.split("/")[1]
                                    const url=await uploadFile(type,name,`ai_open_platform/${kit}`,base64)
                                    if(url){
                                        setPreImg(url)
                                        setAfterImg("")
                                        const res=await generateImage(kit,url)
                                        if(res)isCompare?setAfterImg(res.img_url):setPreImg(res.img_url)
                                    }
                                }
                                return isJpgOrPng && isLt6M; //返回 false 则停止上传
                            }}
                        >
                            <Button style={{backgroundColor:"#f8d435",borderColor:"#F7D230",color:"#fff"}} icon={<UploadOutlined />}
                            >本地上传</Button>
                        </Upload>
                    </div>
                    <Card.Meta  description="提示：图片文件类型支持JPG、PNG、JPEG、BMP，图片大小不超过6M" />
                    {/* 参考图片 */}
                    {!isAIGC&&(<div className='flex gap-5 mt-5'>
                        {data?.images.map((imgUrl,index)=>{
                            return (
                                <div
                                    key={index}
                                    onClick={()=>choosImg(imgUrl,index)}
                                    className="cursor-pointer border-2 border-transparent transition duration-200 ease-in-out hover:border-[#f8d435] p-0.5">
                                    <img src={imgUrl} alt="参考图片" className='w-[90px] h-[90px] object-cover'/>
                                </div>
                            )
                        })}
                    </div>)}
                </Card>
                {isAIGC&&(
                <div>
                    <div>参考图片</div>
                    <div className='flex justify-between' style={{height:isAIGC?"126px":"98px"}}>
                        {data?.images.map((imgUrl,index)=>{
                            return (
                                <div
                                    key={index}
                                    onClick={()=>choosImg(imgUrl,index)}
                                    className={(index === activeIndex?"border-[#f8d435]":"border-transparent")+"cursor-pointer border-2 border-transparent transition duration-200 ease-in-out hover:border-[#f8d435] p-0.5"}>
                                    <img src={imgUrl} alt="参考图片" className='w-[90px] h-full object-cover'/>
                                </div>
                            )
                        })}
                    </div>
                    <div>风格选取</div>
                </div>)}
            </div>
        </div>
    )
}